<template>
	<div class="lookBook">
		<div class="find">
			<router-link to="/home" style="margin-left: 7%;">首页</router-link>
			<div style="display: flex;margin: 0 auto;width: 50%;"><el-input v-model="bookname">
				</el-input>
				<el-button @click="findbookname()">搜索</el-button>
			</div>

			<el-button @click="gocar()">我的购物车</el-button>
		</div>
		<div class="kkk">
		</div>
		<div class="bookbody">
			<img :src="`http://127.0.0.1:80/api/public/showimg/${book.pic}`" />
			<div class="bookbody2">
				<h3>{{book.name}}</h3>
				<el-form ref="form" label-width="80px">
					<el-form-item label="类别:">
						<p>{{book.type}}</p>
					</el-form-item>
					<el-form-item label="出版社:">
						<p>{{book.maker}}</p>
					</el-form-item>
					<el-form-item label="出版时间:">
						<p>{{book.day}}</p>
					</el-form-item>
					<el-form-item label="作者:">
						<p>{{book.author}}</p>
					</el-form-item>
					<el-form-item label="出版号:">
						<p>{{book.sn}}</p>
					</el-form-item>
					<el-form-item label="价格:">
						<p>{{book.price}}</p>
					</el-form-item>
					<el-form-item label="促销价:">
						<p></p>
					</el-form-item>
					<el-form-item label="库存数:">
						<p>{{book.stock}}</p>
					</el-form-item>
					<el-form-item label="销售量:">
						<p>{{book.salenum}}</p>
					</el-form-item>
				</el-form>
				<el-button @click="goxd(book.id)">下单</el-button>
			</div>
		</div>
		<div class="xq1">
			<h5 style="color: orange;">商品详情</h5>
			<div style="width: 100%;border: 1px solid orange;"></div>
			<p style="font-size: 12px;">{{book.info}}</p>
		</div>
		<div class="bookbody3">

			<div>
				<h4>商品评论</h4>
				<img :src="`http://127.0.0.1:80/api/public/showimg/${img}`" />
			</div>
			<div style="width: 80%; margin-top: 2%;">
				<el-input type="textarea" placeholder="整两句呗,小丑" v-model="speak"></el-input>
				<div style="display: flex;">
					<el-rate style="margin-top: 2%;" v-model="rates"></el-rate>
					<el-button style="border: none;margin-top: 1%;" @click="ok()">发布</el-button>
				</div>
			</div>

		</div>
		<div style="width: 60%; border: 1px solid palevioletred; margin:  0 auto;"></div>
		<div class="bookbody4">
			<div v-for="item in list" style="margin-top: 1%;display: flex;">
				<img :src="`http://127.0.0.1:80/api/public/showimg/${item.img}`" />
				<div style=" width: 100%;">
					<p>{{item.nickname}}</p>
					<p style="margin-left: 5%;margin-top: -1.3%;">{{item.tpost}}</p>
					<p><el-rate style="margin-left: 15%;margin-top: -1.1%;" disabled :value="item.rate"></el-rate></p>
					<p style="margin-top: 1%; margin-left: 1%;">{{item.content}}</p>
				</div>

			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'lookBook',

		data() {
			return {
				book: {},
				img: '',
				list: [],
				look: 0,
				rates: 0,
				speak: '',
				user: {},
				bookname: '',
				books: {}
			}
		},
		methods: {
			gocar() {
				this.$router.push('/pcshopCar')
			},
			findbookname() {
				this.books = {
					key: this.bookname
				};
				this.$postkv('/api/public/book/findPageKey/1/3', this.books).then((resp) => {
					console.log('是否拿到参数');
					console.log(resp.data.data.books);
					// this.arr=resp.data.data.books;
					// console.log(this.arr);
					this.$router.push({
						query: {
							arrs: resp.data.data.books
						},
						path: '/hometype'
					})
				})
			},
			ok() {
				console.log(this.rates);
				console.log(this.speak);

				if (window.localStorage.getItem('token') != null) {

					this.user = {
						content: this.speak,
						rate: this.rates

					}
				} else {
					this.$message.error('当前未登录');
				}
				this.$postkv('/api/public/rate/add/' + this.$route.query.ids, this.user).then((resp) => {
					console.log(resp.data.data);
				})
				this.rates = 0;
				this.speak = null;
				this.show();
			},
			goxd(id) {
				console.log(id);
				this.$get('/api/public/addCart/' + id).then((resp) => {
					console.log(resp.data.data);
					if (resp.data.data == 0) {
						this.$message.error('当前未登录');
					}
				})
			},
			show() {
				console.log(this.$route.query.ids);
				this.$get('/api/public/book/findById/' + this.$route.query.ids).then((resp) => {
					this.book = resp.data.data;
					this.book.type = resp.data.data.type.name;
					let time = this.book.tmake;
					console.log(time);
					let str = new Date(time);
					let year = str.getFullYear();
					let month = str.getMonth() + 1;
					let dat = str.getDate();
					let strs = year + "/" + month + "/" + dat;
					this.book.day = strs;
					console.log(str);
					console.log(resp.data.data);
					this.img = window.localStorage.getItem('pic');

					this.$get('/api/public/rate/findByBookid/' + this.$route.query.ids + "/" + 1 + "/" + 10).then((
						resp) => {
						console.log(resp.data.data);
						this.list = resp.data.data.comments;
						console.log(1);
						console.log(this.list.rate);
						this.look = this.list.rate;
					})
				})
			}
		},
		mounted() {
			this.show()
		}
	}
</script>

<style>
	.xq1 {
		width: 60%;
		margin: 0 auto;
		margin-top: 1%;
		padding: 1%;
		background-color: #efefef;
		border-radius: 10px;
	}

	.lookBook {

		margin-top: -5%;
	}

	.bookbody {
		width: 60%;
		margin: 0 auto;
		margin-top: 2%;
		display: flex;
		padding: 1%;
		background-color: #efefef;
		border-radius: 10px;
	}


	.bookbody img {
		width: 300px;
		height: 300px;
	}

	.bookbody2 {
		height: 380px;

		margin-left: 5%;
	}

	.bookbody2 p {
		height: 10px;
	}

	.bookbody2 button {
		font-size: str;
		border: none;
	}

	.bookbody2 h3 {
		line-height: 30px;
	}

	.el-form-item__label {
		height: 10px;
	}

	.bookbody3 {
		width: 60%;
		margin: 0 auto;
		margin-top: 1%;
		display: flex;
	}

	.bookbody3 img {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.bookbody4 {
		width: 60%;
		margin: 0 auto;
	}

	.bookbody4 p {
		font-size: 10px;
	}

	.bookbody4 img {
		width: 50px;
		height: 50px;
		border-radius: 50%;

	}
</style>